import { ref } from 'vue'
import { useAsyncAxios } from '@/utils/asyncFuncStore'
import { useCurrActStroe } from '@/stores/currActStore'
import { useModalStore } from '@/stores/modalStore'
import { storeToRefs } from 'pinia'
import { useSearchInputStroe } from '@/stores/searchInputStore'
import type { MyColumns, ColumnsMember, ErrorData } from '@/types/loginType'
import { useRouter } from 'vue-router'
export default function () {
  const router = useRouter()
  // ... 一个异步方法 获取 columns 数据
  //渲染的 columns 数据
  const columns = ref<MyColumns[]>([])
  // 渲染的 member 数据
  const members = ref<ColumnsMember[]>([])
  const data = ref<MyColumns>()
  function assigData(key: keyof MyColumns, value: string) {
    if (data.value) {
      data.value[key] = value
    }
  }
  // ref dom元素
  const form = ref<HTMLFormElement | null>()
  const isActive = ref<string>('0')

  // 点击专栏标签
  async function columnClicked(id: string) {
    isActive.value = id
    isEdit.value = false
    data.value = columns.value.find((item) => item.columnId === isActive.value)
    columnsMember(id)
    router.push({ params: { id } })
  }

  // 获取数据
  // 获取专栏
  async function myColumns() {
    const { getMyColumns } = useAsyncAxios()
    const { currUser } = storeToRefs(useCurrActStroe())
    const { status, data } = await getMyColumns(currUser.value.id)
    if (status === 200) {
      // 修改渲染的数据
      columns.value = [...(data as MyColumns[]), ...columns.value]
    } else {
      const { changeData } = useModalStore()
      changeData({ status, data: data as ErrorData })
    }
  }

  // 获取对应的成员数据
  async function columnsMember(columnId: string) {
    const { getColumnsMember } = useAsyncAxios()
    const { status, data } = await getColumnsMember(columnId)
    if (status === 200) {
      // 修改渲染的数据
      members.value = data as ColumnsMember[]
    } else {
      const { changeData } = useModalStore()
      changeData({ status, data: data as ErrorData })
    }
  }

  // 修改上传
  // 控制图片显示
  const isEdit = ref(false)
  const newImg = ref('')
  function loadImg(e: HTMLInputElement) {
    isEdit.value = true
    const file = e.files
    if (file) {
      newImg.value = URL.createObjectURL(file[0])
    }
  }

  // 创建新的专栏事件
  function createColumn() {
    isActive.value = ''
    isEdit.value = false
    members.value = []
    data.value = {
      columnId: '',
      columnImg: '/fontImg/Col.png',
      columnMsg: '',
      columnName: '',
      createrId: ''
    }
  }
  // 收集专栏信息
  const formSet = ref<Set<HTMLInputElement>>(new Set())
  function getColumnFormData() {
    const formData = new FormData()
    formSet.value.forEach((input: HTMLInputElement) => {
      if (input.type === 'file' && input.files) {
        formData.append(input.name, input.files[0])
      } else {
        if (input.value.trim()) {
          formData.append(input.name, input.value)
        }
      }
    })
    return formData
  }

  const { searchKeyWords } = useSearchInputStroe()

  return {
    form,
    newImg,
    isEdit,
    isActive,
    columns,
    data,
    members,
    formSet,
    assigData,
    myColumns,
    columnClicked,
    loadImg,
    createColumn,
    getColumnFormData,
    searchKeyWords
  }
}
